<template>
	<view class="payment_record_container">
		<view class="payment_record_box" v-for="(item, index) in paymentRecordList" :key="index">
			<view class="payment_top_box">
				<image :src="headerImg" mode="" class="payment_top_img"></image>
				<view class="payment_top_title">
					抖音号：{{ item.dy_code }}
				</view>
			</view>

			<view class="payment_bottom_box">
				<!-- <view class="payment_time_box">
					<view class="payment_time_all">
						<view class="payment_time">
							直播时间
						</view>
						<view class="payment_type_box">
							<view class="payment_duration">
								时长：{{item.type == 1 ? item.day : item.hour}}{{item.type == 1 ? '天' : '小时'}}
							</view>
							<view class="payment_type">
								类型：{{item.type == 1 ? '天' : '小时'}}
							</view>
						</view>
					</view>
					<view class="payment_status">
						<span v-if="item.payment_status == 0" style="color: #333;">未支付</span>
						<span v-else-if="item.payment_status == 1" style="color: green;">已支付</span>
						<span v-else-if="item.payment_status == 2" style="color: red;">支付失败</span>
						<span v-else-if="item.payment_status == 3" style="color: red;">退款</span>
					</view>
				</view>

				<view class="live_time_box">
					<view class="live_start_time">
						开始时间：{{item.start_time}}
					</view>
					<view class="live_start_time">
						结束时间：{{item.end_time}}
					</view>
				</view> -->

				<view class="person_box">
					<view class="person_title_box">
						<view class="person_title">
							个人信息
						</view>
						<view class="person_status">
							审核状态：
							<span v-if="item.status == 0" style="color: #333;">待审核</span>
							<span v-else-if="item.status == 1" style="color: green;">审核成功</span>
							<span v-else-if="item.status == 2" style="color: red;">审核失败</span>
							<span v-else-if="item.status == 3" style="color: red;">撤销</span>
						</view>
					</view>

					<view class="person_details">
						<view class="top_box">
							<view class="person_name">
								姓名：{{item.id_name}}
							</view>
							<view class="person_card">
								身份证号：{{item.id_card}}
							</view>
						</view>

						<view class="bottom_box" v-if="item.payment_status == 1">
							<view class="payment_price">
								支付金额：<span style="color: #FF0000; font-size: 30rpx;">{{item.amount}}元</span>
							</view>
							<view class="payment_price">
								支付时间：{{item.payment_time}}
							</view>
						</view>

						<view class="bottom_box" v-if="item.payment_status == 3">
							<view class="payment_price">
								退款金额：<span style="color: #FF0000; font-size: 30rpx;">{{item.refund_amount}}元</span>
							</view>
							<view class="payment_price">
								退款时间：{{item.refund_time}}
							</view>
						</view>

						<view class="bottom_box" v-else-if="item.status == 2">
							<view class="payment_price">
								失败原因：{{item.reason ? item.reason : ''}}
							</view>
						</view>
					</view>
				</view>

				<view class="revoke_btn_box">
					<view class="revoke_btn" @click="handleRevoke(item)"
						v-if=" item.payment_status == 0 && item.status == 0 || item.payment_status == null && item.status == 0">
						撤销订单
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836111284ae_1719886097.png',
				queryParams: {
					pageNow: 1,
					pageSize: 10
				},
				total: null,
				paymentRecordList: [],
			}
		},
		onShow() {
			this.paymentRecordList = []
			this.getProgramLiveApplyList()
			if (this.queryParams.pageNow == this.total) {
				return
			}
		},
		filters: {
			idCardDesensitize(value) {
				if (!value) return '';
				const year = value.slice(6, 10).replace(/\d/g, '*');
				const month = value.slice(10, 12).replace(/\d/g, '*');
				const day = value.slice(12, 14).replace(/\d/g, '*');
				const birthDate = year + month + day;
				const sequence = value.slice(14, 18).replace(/.\d{3}$/, '****');
				return value.slice(0, 6) + birthDate + sequence;
			},
		},
		onReachBottom() {
			if (this.queryParams.pageNow < this.total) {
				this.queryParams.pageNow++
				this.getProgramLiveApplyList()
			} else if (this.queryParams.pageNow == this.total) {
				uni.showToast({
					title: '暂无更多记录',
					icon: 'none'
				})
				return
			}
		},
		methods: {
			// 撤销借口
			cancelProgramLiveApply(val) {
				const that = this
				this.$request('/api/cancelProgramLiveApply', {
					apply_id: val.id
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '撤销成功',
							icon: 'none'
						})
						this.paymentRecordList = []
						that.getProgramLiveApplyList()
					} else {
						uni.showToast({
							title: '撤销失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 支付记录接口
			getProgramLiveApplyList() {
				this.$request('/api/getProgramLiveApplyList', {
					is_agent: 1,
					user_id: uni.getStorageSync('userInfo').id,
					page_now: this.queryParams.pageNow,
					page_size: this.queryParams.pageSize
				}, 'GET').then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.paymentRecordList.push(item)
						})
						this.total = res.page_info.page_count
					} else {
						uni.showToast({
							title: '查询支付记录失败',
							icon: 'none'
						})
						return
					}
				})
			},

			// 撤销订单
			handleRevoke(val) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '是否确定撤销？',
					success: function(res) {
						if (res.confirm) {
							that.cancelProgramLiveApply(val)
						} else if (res.cancel) {}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payment_record_container {
		padding: 18rpx 18rpx 0;

		.payment_record_box {
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.payment_top_box {
				position: relative;

				.payment_top_img {
					width: 100%;
					height: 91rpx;
				}

				.payment_top_title {
					position: absolute;
					top: 50%;
					left: 28rpx;
					transform: translateY(-50%);
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
				}
			}

			.payment_bottom_box {
				padding: 34rpx 30rpx 30rpx 30rpx;

				.payment_time_box {
					display: flex;
					justify-content: space-between;

					.payment_time_all {
						display: flex;
						align-items: center;

						.payment_time {
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							margin-right: 19rpx;
						}

						.payment_type_box {
							display: flex;

							.payment_duration {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 30rpx;
								background: #F0FAFF;
								border-radius: 14rpx;
								border: 1px solid #0FB3FF;
								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 19rpx;
								color: #0FB3FF;
								padding: 0 15rpx;
								margin-right: 19rpx;
							}

							.payment_type {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 30rpx;
								background: #FFF5F3;
								border-radius: 14rpx;
								border: 1px solid #FF3B0E;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 19rpx;
								padding: 0 15rpx;
								color: #FF3B0E;
							}
						}
					}

					.payment_status {}
				}

				.live_time_box {
					border-bottom: 1px solid #F0F0F0;
					padding: 18rpx 0 25rpx;

					.live_start_time {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
				}

				.person_box {

					.person_title_box {
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.person_title {
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							padding-top: 28rpx;
						}
					}

					.person_details {

						.top_box {
							display: flex;
							align-items: center;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
							padding: 24rpx 0 30rpx;

							.person_name {
								padding-right: 37rpx;
							}

							.person_card {}
						}

						.bottom_box {
							display: flex;
							align-items: center;

							.payment_price {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #808080;
								padding-right: 39rpx;
							}
						}
					}
				}

				.revoke_btn_box {
					display: flex;

					.refresh_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 187rpx;
						height: 57rpx;
						background: linear-gradient(179deg, #FF6D6E, #FF1D1F);
						box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
						border-radius: 29rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 27rpx;
						color: #FFFFFF;
						margin-right: 20rpx;
					}

					.revoke_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 187rpx;
						height: 57rpx;
						background: linear-gradient(179deg, #6DD8FF, #1287FF);
						box-shadow: 0px 9rpx 5rpx 0px rgba(176, 230, 255, 0.64);
						border-radius: 29rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 27rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>